<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>

    <hr>
    <h2>当前的信息为：{{msg}}</h2>
    <button @click="msg += '!'">修改信息</button>

    <hr>
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>薪资：{{person.job.j1.salary}} K</h2>
    <button @click="person.name+='~'">修改姓名</button>
    <button @click="person.age++">增长年龄</button>
    <button @click="person.job.j1.salary++">增长薪资</button>
</template>

<script>
    // Vue3中的computed 是一个组合式的api，所以需要通过import 进行引入。
    import { ref, reactive, watch } from 'vue';
    export default {
        name: 'Demo',
        setup() {
            // 数据
            let sum = ref(0);
            let msg = ref('我是一条信息');
            let person = ref({
                name: '张三',
                age: 18,
                job: {
                    j1: {
                        salary: 20
                    }
                }
            });

            console.log(sum);
            console.log(msg);
            console.log(person);

            // 使用ref 定义的基本数据类型，不能添加.value，因为watch监视的是refImpl对象，检测的是一个结构。
            watch(sum, (newValue, oldValue) => {
                console.log('sum的值变化了', newValue, oldValue);
            });

            // 使用ref 定义的对象类型，要添加.value。
            // 因为refImpl里面的Proxy的内存地址是不会改变的，如果不将整个对象替换的话。
            // 此时可以获取到RefImpl这个实例对象里面的value属性。
            // watch(person.value, (newValue, oldValue) => {
            //     console.log('person的值变化了', newValue, oldValue);
            // });

            // 如果不想使用.value，可以开启深度监视
            watch(person, (newValue, oldValue) => {
                console.log('person的值变化了', newValue, oldValue);
            }, {
                deep: true // 开启深度监视
            });

            // 返回一个对象（常用）
            return {
                sum,
                msg,
                person
            }
        }
    }
</script>

<style>

</style>